<template>
	<div>
		<el-input prefix-icon="el-icon-search" :value="checked.name" placeholder="请选择题库类型" clearable readonly @click.native="onOpenDialog"></el-input>

		<el-dialog :visible.sync="visible" width="700" append-to-body modal-append-to-body>
			<el-row style="margin-bottom: 7px">
				<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
					<el-form-item>
						<el-input prefix-icon="el-icon-search" v-model="queryForm.name" autocomplete="off" placeholder="请输入名称" clearable></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
				<el-table-column v-if="$tools.isShow('name', tableShowList)" prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column v-if="$tools.isShow('sort', tableShowList)" prop="sort" label="排序" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button plain type="primary" @click="onCheck(scope.row)" v-if="checked.id != scope.row.id">
							选择
						</el-button>
						<el-button plain type="danger" @click="onCancelCheck(scope.row)" v-else>
							取消
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
		</el-dialog>
	</div>
</template>
<script>
import { studyquestionbanktypePage } from "@/api/study/exam/studyquestionbanktype.js"
import { viewTableList } from "@/api/public.api.js"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			visible: false,
			checked: {},

			tableData: [],
			queryForm: {
				name: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			tableList: [],
			tableShowList: [],
		}
	},
	computed: {
		returnValue: {
			get() {
				return this.checked
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
	},
	components: {
		pagination: FortressPagination,
	},
	created() {
		this.initTableList()
	},
	methods: {
		onOpenDialog() {
			this.visible = true
			this.checked.id = this.value
			this.refresh()
		},
		onCheck(row) {
			this.checked = row
			this.returnValue = row.id
			this.visible = false
			this.$emit("on-change")
		},
		onCancelCheck() {
			this.checked = {}
			this.returnValue = ""
			this.visible = false
			this.$emit("on-change")
		},

		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			studyquestionbanktypePage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				name: "",
			}
			this.queryList({ current: 1 })
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("study_questionbank_type").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
	},
}
</script>
<style scoped></style>
